<template>
  <div class="flex-all">
    <div class="left">
      <p>方式1： flex布局</p>
  <a-image :width="200" :src="image1"></a-image>
  <p>方式2：定位布局 magin实现</p>
  <a-image :width="200" :src="image2"></a-image>
  <p>方式3：定位布局 transform实现</p>
  <a-image :width="200" :src="image4"></a-image>
    </div>
    
<div class="out">
  <div class="inner">
  </div>
</div>
  </div>
  
</template>

<script>
import { 
  defineComponent, 
  getCurrentInstance, 
  reactive, 
  ref 
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import image1 from '@/assets/flex.png'
import image2 from '@/assets/margin.png'
import image4 from '@/assets/transform.png'
export default defineComponent({
  name: '',
  // 注册你的组件
  components:{  },
  props: {

  },
  
  emits: [
  ],
  setup(props, {attrs, slots, emit, expose }){
  const route = useRoute();
  const router = useRouter();
    return {
      image1,
      image2,
      image4,
      attrs,    
      slots,
      emit,     
      expose,   
    }
  },
  

  methods:{
  
  }
});
</script>

<style lang="less" scoped>
.flex-all{
  display: flex;
}
.out{
  width: 400px;
  height: 400px;
  background-color: #ccc;
  margin: 0 auto;
  // position: relative;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  display:grid;
  place-items: center;
  .inner {
    // position: absolute;
    // top: 50%;
    // left:50%;
    // transform: translate(-100px,-100px);
    // margin-left: -100px;
    // margin-top: -100px;
    width: 200px;
    height: 200px;
    background-color: burlywood;
  }}
</style>